import { observer } from 'mobx-react';
import ChartStore from '../../../stores/ChartStore';
import StatisticStore from '../../../stores/StatisticStore';

import './Search.scss';
import { StockSearchInput } from './SearchInput';
import Icons from '../../../images/images';
import eventBus from '../../../utils/eventBus';
import { useHistory } from 'react-router';
export const Search = observer(() => {
    let history = useHistory();
    if (!StatisticStore.summary || !StatisticStore.incomes || !StatisticStore.assets) {
        return (<div></div>);
    }
    var symbolList: Array<string> = StatisticStore.summary?.symbol.split('_');
    var yearsList: Array<string> = StatisticStore.incomes?.financial_years;
    var revenueList: Array<number> = StatisticStore.incomes?.total_revenues;
    var incomeList: Array<number> = StatisticStore.incomes?.net_incomes;
    var assetList: Array<number> = StatisticStore.assets?.total_assets;
    var liabsList: Array<number> = StatisticStore.assets?.total_liabs;
    var year: string = yearsList[1].split("-").reverse().join('/');
    var income: string = (((revenueList[0] - revenueList[1]) / revenueList[1]) * 100).toFixed(2);
    var netIncome: string = (((incomeList[0] - incomeList[1]) / incomeList[1]) * 100).toFixed(2);
    var curAsset = assetList[0] - liabsList[0];
    var lastAsset = assetList[1] - liabsList[1];

    var netAssets: string = (((curAsset - lastAsset) / lastAsset) * 100).toFixed(2);
    var curClose = ChartStore.stockData[0]?.close;
    var preClose = ChartStore.stockData[1]?.close;
    var incomeTip: String = income === 'Infinity' ? '迅速' : `了${income}%`;
    if (StatisticStore.noData) {
        return <div></div>
    }
    return (
        <div className="topWrapper">
            <div className='search-content'>
            <img className="back" src={Icons.back} alt="" onClick={() => {
                        eventBus.emit('changeWhiteHeaderBg', false);
                        history.goBack()
                    }} />
            <StockSearchInput />
            </div>
            <div className="info">
                <div className="icon">{symbolList[0][0]}</div>
                <div className="stock-info">
                    <div className='top-info'>
                        <div className="title-info">
                            <div className="title">{symbolList[0]}</div>
                            <div className="divider"></div>
                            <div className="subtitle">{symbolList[1]}</div>
                        </div>
                        {ChartStore.stockData && <div className="data">{curClose}({((curClose - preClose) / preClose * 100).toFixed(2)}%)</div>}
                    </div>
                    <div className='bottom-info'>
                        <div className="abstract">{StatisticStore.summary.name}</div>
                        {/* <img className="follow" src={icons.icon_add}></img> */}
                    </div>
                </div>
            </div>

            <div className="introduce">
                {symbolList[0]}公司从{year}结束的财政年度开始：收入上升{incomeTip}；净收入上升了{netIncome}%；净资产上升了{netAssets}%。
            </div>
        </div>
    );
});